<template>
    <view class="wanlshop-container">
        <!-- 导航条 -->
        <view
            v-if="common.modulesData.homeModules.page"
            class="wanlshop-container__head"
            :style="{
                height: headHeight + 'px',
                color: common.modulesData.homeModules.page
                    ? common.modulesData.homeModules.page.style.navigationBarTextStyle == '#ffffff'
                        ? '#ffffff'
                        : '#333333'
                    : '',
                backgroundColor: common.modulesData.homeModules.page
                    ? common.modulesData.homeModules.page.style.navigationBarBackgroundColor
                    : '#f7f7f7',
                backgroundImage:
                    'url(' +
                    $wanlshop.oss(
                        common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBackgroundImage : '',
                        0,
                        50,
                        1,
                        'transparent',
                        'png'
                    ) +
                    ')',
            }"
        >
            <view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }">
                <view class="navigater flex align-center justify-between">
                    <view class="flex" @tap="toPage()">
                        <view class="text-xl">
                            <text>
                                {{ city_name ? city_name : "平邑" }}
                            </text>
                        </view>
                    </view>
                    <view class="search flex align-center margin-lr-sm round">
                        <view class="icon text-df text-bold wanl-gray-dark">
                            <text class="wlIcon-sousuo1"></text>
                        </view>
                        <swiper vertical autoplay circular interval="3000">
                            <swiper-item @tap="handleSearch('')">
                                <text class="wanl-gray-dark text-cut">搜索 商品、类目</text>
                            </swiper-item>
                            <swiper-item
                                v-for="(item, index) in common.modulesData.searchModules"
                                :key="item.keywords"
                                @tap="handleSearch(item.keywords)"
                            >
                                <text class="wanl-gray-dark text-cut">{{ item.keywords }}</text>
                            </swiper-item>
                        </swiper>
                    </view>
                    <view class="flex">
                        <view class="margin-right-bj text-xxl position-relative" @tap="$wanlshop.to('/pages/user/coupon/list')">
                            <text class="wlIcon-coupon" />
                            <view class="cu-tag badge">减</view>
                        </view>
                        <view class="text-xxl" @tap="toNotice()">
                            <text class="wlIcon-xiaoxizhongxin"></text>
                        </view>
                    </view>
                </view>
                <view class="toolbar flex padding-lr-bj align-center">
                    <scroll-view class="scroll" scroll-x scroll-with-animation :scroll-left="scrollLeft">
                        <view class="scroll__item" :class="{ action: currentItemId === 'follow' }" @tap="handleSelect('follow', 0)">
                            关注
                        </view>
                        <view class="scroll__item" :class="{ action: currentItemId === 'home' }" @tap="handleSelect('home', 1)">
                            推荐
                        </view>
                        <view
                            class="scroll__item"
                            v-for="(item, index) in common.modulesData.categoryModules"
                            :key="item.id"
                            :class="{ action: currentItemId === 'cid' + item.id }"
                            @tap="handleSelect('cid' + item.id, index + 2)"
                        >
                            {{ item.name }}
                        </view>
                    </scroll-view>
                    <view class="category flex align-center" @tap="handleModal">
                        <text v-if="isModal" class="wlIcon-fanhui3"></text>
                        <text v-else class="wlIcon-fanhui4"></text>
                    </view>
                </view>
            </view>
        </view>

        <swiper
            class="wanlshop-container__main"
            :current-item-id="currentItemId"
            :style="{
                height: '340px',
            }"
            @change="changeCurrent"
            @animationfinish="animationFinish"
        >
            <swiper-item item-id="home">
                <view class="home">
                    <wanl-page-advert-banner :advertData="bannerData.banner_ad" />
                    <wanl-page-menu :bannerAD="bannerData.good_type" />
                </view>
            </swiper-item>
        </swiper>

        <view class="wanl-list">
            <!-- 主体 -->

            <block v-if="xp_good.length > 0">
                <!-- {{goodsData}} -->
                <div class="newproduct flex-box-x" tapmode @click="openWin_goods_list_type(xp_good[0].sign)">
                    <div class="newproduct_left col-xs-x flex-y-center">
                        <span>{{ xp_good[0].sign }}</span>
                    </div>
                    <div class="newproduct_right flex-y-center">
                        <span>更多</span>
                        <img src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
                    </div>
                </div>
                <wanl-product :dataList="xp_good" :dataStyle="liststyle" :dataType="goodsType" />
            </block>
            <block v-if="jp_good.length > 0">
                <!-- {{goodsData}} -->
                <div class="newproduct flex-box-x" tapmode @click="openWin_goods_list_type(jp_good[0].sign)">
                    <div class="newproduct_left col-xs-x flex-y-center">
                        <span>{{ jp_good[0].sign }}</span>
                    </div>
                    <div class="newproduct_right flex-y-center">
                        <span>更多</span>
                        <img src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
                    </div>
                </div>
                <wanl-product :dataList="jp_good" :dataStyle="liststyle" :dataType="goodsType" />
            </block>
            <block v-if="qc_good.length > 0">
                <div class="newproduct flex-box-x" tapmode @click="openWin_goods_list_type(qc_good[0].sign)">
                    <div class="newproduct_left col-xs-x flex-y-center">
                        <span>{{ qc_good[0].sign }}</span>
                    </div>
                    <div class="newproduct_right flex-y-center">
                        <span>更多</span>
                        <img src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
                    </div>
                </div>
                <wanl-product :dataList="qc_good" :dataStyle="liststyle" :dataType="goodsType" />
            </block>
            <!-- <uni-load-more :status="status" :content-text="contentText" /> -->
            <view class="edgeInsetBottom"></view>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
    data() {
        return {
            headHeight: 75,
            windowHeight: 0,
            headTop: 0,
            currentItemId: "home",
            currentData: {},
            scrollLeft: 0,
            isModal: false,
            WanlScroll: 0, //记录页面滚动
            scrollStype: false, //滚动状态
            filterIndex: 0, //
            priceOrder: 0, //1 价格从低到高 2价格从高到低
            liststyle: "col-1-10", //列表样式
            xp_good: [], //商品列表数据
            jp_good: [],
            qc_good: [],
            bannerData: {},
            showRight: false,
            category: "",
            goodsType: "goods",
            empty: "没有找到任何宝贝",
            params: {
                search: "",
                sort: "weigh",
                order: "asc",
                page: 1,
                filter: {},
                op: {},
            },
            likeData: [],
            reload: false, //判断是否上拉
            last_page: 0,
            status: "loading",
            contentText: {
                contentdown: "",
                contentrefresh: "正在加载..",
                contentnomore: "没有更多数据了",
            },
            city_name: "平邑",
        };
    },
    computed: {
        ...mapState(["common", "user", "update", "statistics"]),
    },
    onShow() {
        // #ifdef APP-PLUS
        plus.navigator.setFullscreen(false);
        // #endif
        // 计算页面尺寸
        let sys = this.$wanlshop.wanlsys();
        this.headTop = sys.top;
        this.headHeight = sys.height + uni.upx2px(60);
        this.windowHeight = sys.windowHeight;
        setTimeout(() => {
            uni.setNavigationBarColor({
                frontColor: this.$store.state.common.modulesData.homeModules.page
                    ? this.$store.state.common.modulesData.homeModules.page.style.navigationBarTextStyle
                    : "",
                backgroundColor: this.$store.state.common.modulesData.homeModules.page
                    ? this.$store.state.common.modulesData.homeModules.page.style.navigationBarBackgroundColor
                    : "",
            });

            // console.log(this.statistics.notice)
            var total = this.statistics.notice.notice + this.statistics.notice.order + this.statistics.notice.chat;
            // console.log(total);
            if (total > 0) {
                uni.setTabBarBadge({
                    //显示数字
                    index: 2, //tabbar下标
                    text: "" + total + "",
                });
            }
        }, 200);

        this.city_name = uni.getStorageSync("city_name");
        console.log(this.city_name);
    },
    onLoad() {
        this.loadData();
        this.loadAd();
        if (this.goodsData.length == 0) {
            // this.loadlikeData();
        }
    },
    // 监听上拉
    onPullDownRefresh() {
        this.params.page = 1;
        this.reload = true;
        this.loadData();
    },
    // 下拉刷新
    onReachBottom() {
        if (this.params.page >= this.last_page) {
            this.status = "noMore";
        } else {
            this.reload = false;
            this.contentText.contentdown = "上拉显示更多";
            this.params.page = this.params.page + 1; //页码+1
            this.status = "loading";
            this.loadData();
        }
    },
    // 监听滚动
    onPageScroll(object) {
        if (object.scrollTop > this.WanlScroll) {
            this.scrollStype = false;
        } else {
            this.scrollStype = true;
        }
        if (object.scrollTop < 0) {
            this.scrollStype = false;
        }
        this.WanlScroll = object.scrollTop;
    },
    // 监听返回
    onUnload() {
        if (this.showRight) {
            this.closeDrawer();
            return true;
        }
    },

    methods: {
        ...mapActions({
            download: "update/download", // 立即下载
            ignore: "update/ignore", // 忽略更新
        }),
        toPage() {
            uni.navigateTo({
                url: "/pages/city",
            });
        },
        // 动画
        animationFinish(e) {
            //#ifdef APP-PLUS
            this.changeCurrent(e);
            //#endif
        },
        // 滚动的tag
        changeCurrent(e) {
            this.currentItemId = e.detail.currentItemId;
            this.scrollLeft = (e.detail.current - 1) * 50;
        },
        //异步加载商品列表
        async loadAd() {
            // this.params.good_type_id = 'good';
            this.params.region_name = "托普·平邑仓";
            await uni.request({
                url: "/api/home/index_ad",
                success: (res) => {
                    this.bannerData = res.data;
                },
            });
        },
        //异步加载商品列表
        async loadData() {
            // this.params.good_type_id = 'good';
            this.params.region_name = "托普·平邑仓";
            await uni.request({
                url: "/api/home/home",
                data: this.params,
                success: (res) => {
                    this.xp_good = res.data.xp_good;
                    this.qc_good = res.data.qc_good;
                    this.jp_good = res.data.jp_good;
                },
            });
        },
        // 滚动底部加载猜你喜欢
        async loadlikeData() {
            await uni.request({
                url: `/wanlshop/product/likes?pages=${this.goodsType}`,
                success: (res) => {
                    this.likeData = res.data; //评论数据 追加
                },
            });
        },
        // 加载侧边栏数据
        async loadDrawer() {
            this.drawerParams.type = this.goodsType;
            await uni.request({
                url: "/wanlshop/product/drawer",
                data: this.drawerParams,
                success: (res) => {
                    var brand = [],
                        attribute = [];
                    if (res.data.brand) {
                        res.data.brand.forEach((item) => {
                            var brandData = {
                                id: item.id,
                                name: item.name,
                                fold: false, // 展开
                                choice: false,
                            };
                            brand.push(brandData);
                        });
                    }
                    if (res.data.attribute) {
                        res.data.attribute.forEach((item) => {
                            var value = [];
                            item.value.forEach((vo) => {
                                var valueData = {
                                    name: vo.name,
                                    choice: false,
                                };
                                value.push(valueData);
                            });
                            var attributeData = {
                                name: item.name,
                                value: value,
                                fold: false,
                            };
                            attribute.push(attributeData);
                        });
                    }
                    this.drawerData.brand = brand;
                    this.drawerData.attribute = attribute;
                },
            });
        },
        //筛选点击
        tabClick(index) {
            if (this.filterIndex === index && index !== 3) {
                return;
            }
            this.filterIndex = index;
            if (index === 3) {
                this.priceOrder = this.priceOrder === 1 ? 2 : 1;
            } else {
                this.priceOrder = 0;
            }

            // 排序方式
            if (index === 0) {
                this.params.sort = "weigh";
                this.params.order = "desc";
            }
            if (index === 1) {
                this.params.sort = "sales";
                this.params.order = "desc";
            }
            if (index === 2) {
                this.params.sort = "createtime";
                this.params.order = "desc";
            }
            if (index === 3 && this.priceOrder === 1) {
                this.params.sort = "price";
                this.params.order = "desc";
            }
            if (index === 3 && this.priceOrder === 2) {
                this.params.sort = "price";
                this.params.order = "asc";
            }
            this.status = "loading";
            this.params.page = 1;
            this.reload = true;
            this.loadData();
            uni.pageScrollTo({
                duration: 300,
                scrollTop: 0,
            });
        },
        // 打开抽屉，并且加载品牌和类目属性
        showDrawer() {
            this.showRight = true;
            if (!this.drawerType.first) {
                this.loadDrawer();
                this.drawerType.first = true;
            }
        },
        // 点击抽屉
        onDraver(e) {
            var index = e.currentTarget.dataset.attribute,
                key = e.currentTarget.dataset.key;
            if (key == "brand" || key == "city") {
                // 取消所有选项,选中下面
                this.drawerData[key].forEach((item, keys) => {
                    keys != index ? (item.choice = false) : "";
                });
                // 取消同城
                this.drawerData.sameCity.choice = false;
                this.drawerData[key][index].choice = !this.drawerData[key][index].choice;
            } else if (key == "sameCity") {
                // 取消所有城市选项
                this.drawerData.city.forEach((item) => {
                    item.choice = false;
                });
                this.drawerData.sameCity.choice = !this.drawerData.sameCity.choice;
            } else {
                // 取消所有选项,选中下面
                this.drawerData.attribute[index].value.forEach((item, keys) => {
                    keys != key ? (item.choice = false) : "";
                });
                this.drawerData.attribute[index].value[key].choice = !this.drawerData.attribute[index].value[key].choice;
            }
        },
        // 提交抽屉
        onDrawerTo() {
            // 查询价格
            if (this.drawerData.price.low != "" && this.drawerData.price.high != "") {
                this.params.filter.price = this.drawerData.price.low + "," + this.drawerData.price.high;
                this.params.op.price = "BETWEEN";
            } else {
                delete this.params.filter.price;
                delete this.params.op.price;
            }
            // 查询地址
            var cityData = "";
            this.drawerData.city.forEach((item) => {
                if (item.choice) {
                    cityData = item.name;
                }
            });
            if (cityData) {
                this.params.filter["shop.city"] = "%" + cityData + "%";
                this.params.op["shop.city"] = "LIKE";
            } else if (this.drawerData.sameCity.choice) {
                this.params.filter["shop.city"] = this.drawerData.sameCity.name;
                this.params.op["shop.city"] = "LIKE";
            } else {
                delete this.params.filter["shop.city"];
                delete this.params.op["shop.city"];
            }
            // 查询品牌
            var brandData = "";
            this.drawerData.brand.forEach((item) => {
                if (item.choice) {
                    brandData = item.id;
                }
            });
            if (brandData) {
                this.params.filter.brand_id = brandData;
                this.params.op.brand_id = "=";
            } else {
                delete this.params.filter.brand_id;
                delete this.params.op.brand_id;
            }
            // 查询属性
            var attributeData = [];
            this.drawerData.attribute.forEach((item, index) => {
                // item.name
                item.value.forEach((vo, index) => {
                    if (vo.choice) {
                        attributeData.push("%" + vo.name + "%");
                    }
                });
            });
            // 1.0.8升级 有此项无法查询
            if (attributeData.length > 0) {
                this.params.filter.category_attribute = attributeData.join(",");
                this.params.op.category_attribute = "LIKE";
            } else {
                delete this.params.filter.category_attribute;
                delete this.params.op.category_attribute;
            }
            this.status = "loading";
            // 1.0.8升级
            this.goodsData = [];
            this.params.page = 1;
            this.reload = true;
            this.loadData();
            this.closeDrawer();
        },
        // 重置抽屉
        onDrawerReset() {
            this.drawerData.city.forEach((item) => {
                item.choice = false;
            });
            this.drawerData.sameCity.choice = false;
            this.loadDrawer();
        },
        // 点击抽屉标题
        onDraverTitle(e) {
            var stype = e.currentTarget.dataset.key;
            if (stype === "city") {
                this.drawerType[stype] = !this.drawerType[stype];
            } else {
                this.drawerData.attribute[stype].fold = !this.drawerData.attribute[stype].fold;
            }
        },
        // 关闭抽屉
        closeDrawer() {
            this.showRight = false;
        },
        search() {
            this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, "fade-in", 100);
        },
        editListstyle() {
            this.liststyle = this.liststyle == "col-1-10" ? "col-2-20" : "col-1-10";
        },
    },
};
</script>
<style lang="scss">
.newproduct {
    height: 2.65rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem;
    margin-top: 0.3rem;
}

.new_wraper {
    padding: 0 0.75rem;
}

.newproduct_left {
    /* background: url();
				background-repeat: no-repeat;
				background-size: auto 0.8rem;
				background-position: left center; */
    padding-left: 10px;
    display: inline-block;
    font-size: 0.9rem;
    /* font-family: PingFangSC-Semibold; */
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    margin-bottom: -0.5rem;
}

.newproduct_right span {
    font-size: 0.7rem;
    /* font-family: PingFangSC-Regular; */
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
}

.newproduct_right img {
    width: 0.46rem;
    margin-left: 0.15rem;
}

// .newproduct_list {
// 	/*height: 6.75rem;*/
// 	background: rgba(255, 255, 255, 1);
// 	padding: 0.5rem;
// 	box-sizing: border-box;
// 	border-radius: 0.4rem;
// 	margin-top: 0.5rem
// }

.home {
    background-size: 100%;
    padding-top: 55px;
    background-color: rgb(245, 245, 245);
    background-image: url("https://malljintao.oss-cn-shenzhen.aliyuncs.com/uploads/20230325/d2166f1059320c2d6416823fcd810869.png?x-oss-process=image/auto-orient,1/interlace,1/format,png/quality,q_90/sharpen,50/resize,m_mfit,w_1242");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.wanlshop-container {
    &__head {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background-size: 100% auto;
        background-repeat: no-repeat;

        .navigater {
            height: 86rpx;
            padding-left: 25rpx;
            padding-right: 25rpx;
            /* #ifdef MP */
            padding-right: 220rpx;

            /* #endif */
            .search {
                flex: 1;
                background-color: #fff;
                height: 66rpx;
                border: 2rpx solid #fff;

                .icon {
                    margin: 0 20rpx;
                }

                swiper {
                    height: 100%;
                    width: 100%;
                    margin-right: 10rpx;

                    swiper-item {
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }

        .toolbar {
            .scroll {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;

                &__item {
                    position: relative;
                    z-index: 2;
                    font-size: 28rpx;
                    display: inline-flex;
                    height: 58rpx;
                    align-items: center;
                    margin-right: 40rpx;

                    &.action {
                        position: relative;
                        font-weight: bold;
                        font-size: 30rpx;

                        &::after {
                            content: " ";
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            height: 4rpx;
                            width: 30rpx;
                            border-radius: 6rpx;
                            background-color: #fff;
                        }
                    }
                }
            }

            .category {
                box-shadow: #eee -16rpx 0 16rpx -16rpx;
                height: 58rpx;
                font-size: 28rpx;
                padding-left: 25rpx;
            }
        }
    }

    &__main {
        position: relative;
        z-index: 99;
    }

    .WANL-MODAL {
        .cu-modal {
            &.top-modal {
                background: rgba(0, 0, 0, 0.6);
                text-align: inherit;

                .cu-dialog {
                    background: #fff;
                    border-radius: 0 0 18rpx 18rpx;

                    .category {
                        display: grid;
                        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                        grid-auto-flow: row dense;
                        grid-gap: 16rpx;

                        .item {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 12rpx 0;
                            border: 2rpx solid transparent;

                            &.action {
                                background-color: transparent;
                                border-color: #f40;
                                color: #f40;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
}

.cu-custom .search-form {
    border: 3rpx solid #fe6600;
    background-color: #fff;
}

.cu-tag:not([class*="bg"]):not([class*="line"]) {
    background-color: #f7f7f7;
}
</style>
